CircleCIの新UIでHello Worldしてみた
こんにちは、CX事業本部の若槻です。
現在、CI/CDサービスCircleCIでは新しいユーザーインターフェイス（新UI）が導入されつつあります。
そこで今回はCircleCIのドキュメントを参考にしつつ、この新UIからHello Worldをしてみました。
CircleCIのサインアップ
まず、ドキュメント[CircleCI を始める]をもとにCircleCIのサインアップを行います。連携させるVCSはGitHubです。
ユーザー登録ページにアクセスします。[GitHun でログイン]をクリックします。
CircleCIに連携するGitHubアカウントへのサインインを求められます。ID・パスワードを入力し[Sign in]をクリックして認証を行います。
CircleCIに付与される権限が示されるので確認したら[Authorize circleci]をクリックします。GitHubの場合はPublicおよびPrivateリポジトリの読み取り/書き込み権限、ユーザーメールアドレスの読み取り権限がCircleCIに付与されるようです。
GitHubのどのorganizationを連携するか選択を求められるので選択します。
すると[Projects]ページが開き、連携したGitHub組織からリポジトリが読み込まれていることがProject一覧から確認できます。ユーザーインターフェイスはすでに新UIになっていますね。
これでCircleCIへのGitHub連携によるサインアップができました。
Hello Worldをしてみる
次に、ドキュメント[Hello World]をもとにCircleCIでHello Worldをしてみます。
まずGitHubで新しいリポジトリを作ります。今回はcircleci-helloworldという名前で作りました。
すると、CircleCIのProject一覧に「circleci-helloworld」リポジトリがProjectとして自動で追加されました。このリポジトリの[Set Up Project]をクリックします。
[Add Config]をクリックします。
Pipeline一覧ページに自動遷移します。circleci-project-setupというブランチのwelcomeというworkflowが2つ開始されています。
GitHubでcircleci-helloworldリポジトリを見ると、circleci-project-setupブランチが作成され、ファイル.circleci/config.ymlが追加されていました。
また、circleci-helloworldリポジトリのデフォルトブランチがcircleci-project-setupブランチに変更されていました。（これはちょっと予想外の動作でした）
circleci-project-setupブランチに作成された.circleci/config.ymlファイルは以下のような内容でした。
# Use the latest 2.1 version of CircleCI pipeline process engine. See: https://circleci.com/docs/2.0/configuration-reference version: 2.1 # Use a package of configuration called an orb. orbs: # Declare a dependency on the welcome-orb welcome: circleci/[email protected] # Orchestrate or schedule a set of jobs workflows: # Name the workflow "welcome" welcome: # Run the welcome/run job in its own container jobs: - welcome/run
workflowはどちらもSUCCESSとなりました。（なんで２つ走ったんだろう…）
次に、.circleci/config.ymlを以下の内容で更新してコミットします。
version: 2
jobs:
build:
docker: # Executor タイプです。他に machine、macOS という実行タイプを指定できます
- image: circleci/node:4.8.2 # プライマリコンテナです。このなかでジョブコマンドが実行されます
steps:
- checkout # プロジェクトのディレクトリにあるコードをチェックアウトします
- run: echo "hello world" # 「echo」コマンドを実行します
更新とコミットはGitHubのコンソールから行いました。
するとworkflowというworkflowが開始されました。
SUCCESSしたようです。workflowをクリックして開いてみます。
buildというジョブが確認できます。クリックして開いてみます。
buildジョブで実行されたステップが確認できます。exho "hello world"ステップを開いてみると、hello worldが標準出力されていました。
簡単ですがこれでCircleCIの新UIでHello Worldすることができました。
おわりに
以上、CircleCI初級者のわたしが新UIでサインアップからGitHub連携のビルドを行ってHello Worldをしてみるまでの一連の流れでした。
因みにわたしがどのくらい初級者かと言うと、
- 開発のCI/CDツールとしてCircleCIを使ってはいる（半年くらい）
- CircleCI自体のセットアップはしたことがない。自動実行されるWorkflowの成否を見守るくらい
- 使っているCircleCI環境はまだ旧UI。新UIを触ったことはほとんどなかった
くらいには初級者です。引き続きCircleCIを自分で触りまくって"新UIで"使いこなせるようになりたいと思います。
以上
